<template>
	<div class="back">
		<div class="categories">
			<h1 id="header" class="header borGray">分类</h1>
			<div class="lists">
				<!--一级页面的item信息传参到二级页面 -->
				<router-link :to=" {path:'/ProductLists',query:{picName:val.name}}" v-for="(val,index) in pic" :key="index">
					<img :src="val.activePic">
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			pic: [],
		}
	},
	mounted() {
		fetch("../../static/data/categories/classify.json")
			.then(res => res.json())
			.then(res => { this.pic = res.data })
	}

}
</script>

<style scoped>
.categories {
	background: #f9f9f9;
	padding-top: .8rem;
	margin-bottom: .5rem;
}

.categories .lists {
	overflow: hidden;
}

.categories img {
	width: 30vw;
	margin-left: .14rem;
	margin-bottom: .09rem;
}
</style>